
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            input {              
                  appearance: none;
                  /* 清除单选框的默认样式 */
                  width: 30px;
                  height: 30px;
            }
            input:nth-child(1){
                  background-color: aqua;
            }
            input:nth-child(1):checked ~ div{
                  background-color: aqua;
            }
            input:nth-child(2){
                  background-color: bisque;
            }
            input:nth-child(2):checked ~ div{
                  background-color: bisque;
            }
            input:nth-child(3){
                  background-color: blueviolet;
            }
            input:nth-child(3):checked ~ div{
                  background-color: blueviolet;
            }
            input:nth-child(4){
                  background-color: brown;
            }
            input:nth-child(4):checked ~ div{
                  background-color: brown;
            }
            input:nth-child(5){
                  background-color: antiquewhite;
            }
            input:nth-child(5):checked ~ div{
                  background-color: antiquewhite;
            }
            div {
                  font-size: 300%;
                  width: 200px;
                  height: 200px;
                  background-color: rgb(243, 232, 232);
                  /* 设置div中的背景颜色 */
            }
      </style>
</head>
<body>
     <input type="radio" name="color">
     <input type="radio" name="color">
     <input type="radio" name="color">
     <input type="radio" name="color">
     <input type="radio" name="color">
        <!-- 设置元素为单选框 -->
      <div>变颜色</div>
</body>
</html>